<template>
  <div class="business">
    <div class="panel-search-top">
      <div class="form">
        <el-form ref="form" :inline="true" label-width="0px" size="mini">
          <el-form-item>
            <el-input placeholder="请输入查询内容"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="button-group-operate">
        <el-button icon="el-icon-new" @click="handleAdd() ">新增</el-button>
        <el-button icon="el-icon-editor" @click="handleAdd(1) ">编辑</el-button>
        <el-button icon="el-icon-delete" @click="dialogDelete=true">删除</el-button>
        <el-button icon="el-icon-import" @click="dialogInport=true">导入</el-button>
        <el-button icon="el-icon-export" @click="dialogExport=true">导出</el-button>
      </div>
    </div>

    <div class="pagecontent">
      <div class="panel">
        <div class="panel-con"> 
          <el-table :data="json.portraitC1">
            <el-table-column prop="c1" label="序号"></el-table-column>
            <el-table-column prop="c2" label="网络名称"></el-table-column>
            <el-table-column prop="c3" label="IP/网段"></el-table-column>
            <el-table-column prop="c1" label="类型"></el-table-column>
            <el-table-column prop="c2" label="宽带"></el-table-column>
            <el-table-column prop="c3" label="备注"></el-table-column>
            <el-table-column prop="c4" label="操作">
              <template slot-scope="scope">
                <a class="table-edit"  @click="handleAdd(1)"></a>
                 <a class="table-delete" @click="dialogDelete=true" href="#"></a>
              </template>
            </el-table-column>
          </el-table>
          <div class="compage">
            <el-pagination background layout="  prev, pager, next, jumper" :total="1000"></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :title="`${dialogAddTitle}网络组件`" width="650px" :visible.sync="dialogAdd">
      <el-form ref="form" label-width="230px" label-position="right" size="mini">
        <el-form-item label="网络名称">
           <el-input ></el-input>
        </el-form-item>
        <el-form-item label="IP网段">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select placeholder="请选择">
            <el-option label="选择1" value="1"></el-option>
            <el-option label="选择2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="带宽">
           <el-input ></el-input>
        </el-form-item>
         <el-form-item label="所属子网">
          <el-select placeholder="请选择">
            <el-option label="选择1" value="1"></el-option>
            <el-option label="选择2" value="2"></el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="备注信息">
          <el-input v-model="dialogAddForm.desc"></el-input>
        </el-form-item>
        <el-form-item class="buttonlist">
          <el-button @click="dialogAddSubmit" type="primary">确定</el-button>
          <el-button @click="dialogAdd = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="请选择导入文件" width="650px" :visible.sync="dialogInport">
      <el-form ref="form" label-width="230px" label-position="right" size="mini">
        <el-form-item label="文件">
          <el-select placeholder="请选择文件">
            <el-option label="选择1" value="1"></el-option>
            <el-option label="选择2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="buttonlist">
          <el-button type="primary">确定</el-button>
          <el-button @click="dialogInport = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="请先命名导出文件" width="650px" :visible.sync="dialogExport">
      <el-form ref="form" label-width="230px" label-position="right" size="mini">
        <el-form-item label="名称">
          <el-input v-model="dialogAddForm.name"></el-input>
        </el-form-item>
        <el-form-item class="buttonlist">
          <el-button type="primary">确定</el-button>
          <el-button @click="dialogExport = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog><el-dialog title="提示" width="650px" :visible.sync="dialogDelete">
      <el-form ref="form" label-width="230px" label-position="right" size="mini">
        <el-form-item label="">
         是否删除当前所选数据
        </el-form-item>
        <el-form-item class="buttonlist">
          <el-button type="primary">确定</el-button>
          <el-button @click="dialogDelete = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="提示" width="650px" :visible.sync="dialogSave">
      <el-form ref="form" label-width="230px" label-position="right" size="mini">
        <el-form-item label="">
          是否保存当前页面
        </el-form-item>
        <el-form-item class="buttonlist">
          <el-button type="primary">确定</el-button>
          <el-button @click="dialogSave = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import Data from "../data/index";

export default {
  name: "businessPortrait",
  data() {
    return {
      dialogAddForm: {
        name: "",
        ip: "",
        desc:""
      },
      dialogAdd: false,dialogAddTitle:'创建',dialogDelete:false,dialogSave:false,
      dialogInport: false,
      dialogExport: false,
      json: {
        portraitC1: Data.portraitC1
      }
    };
  },
  components: {},
 methods: {
    dialogAddSubmit(){
      if(this.dialogAddForm.name.length < 3 || this.dialogAddForm.name.length > 10 ){
        alert('长度不小于数字3字符或3个字母或3个中文字符， 最大不超10个中文字符');
        return;
      }
      let reg = /(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))/;
       if (!reg.test(this.dialogAddForm.ip)) {
        alert("只允许IPv4地址由4组数字组成，每组数字之间以.分隔，每组数字的取值范围是0~255");
        return false;
      }
       if(this.dialogAddForm.desc   > 30 ){
        alert('备注信息最大不超30个中文字符');
        return;
      }

    },
    handleAdd(type)  {
      this.dialogAdd = true;if(type==1){this.dialogAddTitle="编辑";}
    }
  }
};
</script>

<style lang="scss" >
@import url(../assets/css/base.css);
.el-dialog__body .el-input--mini .el-input__inner {
  width: 206px;
}
</style>
 
<style scoped lang="scss">
.parallel-wrap {
  margin-top: 10px;
}

.button-group-operate {
  float: right;
}
.form {
  float: left;
}
.appright {
  background: #fff;
}
.pagecontent {
  padding: 20px;
}
</style>
